<template>
  <div class="publish">
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="招标专区">
          <!-- 表单-->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            label-position="top"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="招标名称" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入招标名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="招标编号" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入招标编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="招标情况" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择招标情况"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发布日期" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择发布日期"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="6">
                <el-form-item label="所属行业" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入所属行业"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属分类" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择所属分类"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属地区" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择所属地区"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"> </el-col>
            </el-row>

            <!-- 选择文件 -->
            <el-form-item>
              <div style="display: flex">
                <div class="jia">+</div>
                <div style="margin-right: 20px">招标附件</div>
                <!-- 附件上传 -->
                <el-upload
                  ref="uploadRef"
                  action="http://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :auto-upload="false"
                >
                  <template #trigger>
                    <el-button
                      style="
                        width: 90px;
                        height: 36px;
                        background: #f43107;
                        border-radius: 4px;
                        color: #fff;
                        margin-right: 20px;
                      "
                    >
                      选择文件
                    </el-button>
                    <span style="color: #333333">附件名称.xlsx</span>
                  </template>
                </el-upload>
              </div>
            </el-form-item>

            <div class="footer">
              <el-button
                @click="resetForm(ruleFormRef)"
                style="width: 90px; height: 36px"
              >
                取消
              </el-button>
              <el-button
                style="
                  width: 90px;
                  height: 36px;
                  background: #f43107;
                  color: #fff;
                "
                @click="submitForm(ruleFormRef)"
              >
                提交
              </el-button>
            </div>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="项目专区">
          <!-- 表单-->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            label-position="top"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="招标名称" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入招标名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="招标编号" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入招标编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="招标情况" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择招标情况"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发布日期" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择发布日期"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="6">
                <el-form-item label="所属行业" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 250px; height: 36px"
                    placeholder="请输入所属行业"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属分类" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择所属分类"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属地区" prop="name">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="请选择所属地区"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"> </el-col>
            </el-row>

            <div class="footer">
              <el-button
                @click="resetForm(ruleFormRef)"
                style="width: 90px; height: 36px"
              >
                取消
              </el-button>
              <el-button
                style="
                  width: 90px;
                  height: 36px;
                  background: #f43107;
                  color: #fff;
                "
                @click="submitForm(ruleFormRef)"
              >
                保存
              </el-button>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import "../../../../../assets/com/com.scss";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import type { UploadInstance } from "element-plus";
// 富文本编辑器
const msg = ref("");
// 下拉
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];

const ruleForm = reactive({
  name: "",
});
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

// 附件上传
const uploadRef = ref<UploadInstance>();

// 按钮
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #fff;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #000;
}

:deep(.el-tabs__nav) {
  border-top: 2px solid #fff;
}

:deep(
    [data-v-9448484b]
      .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item.is-active
  ) {
  border-top: 3px solid #f43107;
}

.publish {
  width: 100%;
  position: relative;
  // height: 940px;
  height: calc(100vh - 150px);
  padding: 20px;
  background-color: #fff;
}

// 下拉
:deep(.el-select__wrapper) {
  height: 36px;
}

.btn {
  width: 90px;
  height: 36px;
  background: #f43107;
  border-radius: 4px;
  border: 0;
  color: #fff;
}

// footer
.footer {
  margin-top: 220px;
  // position: absolute;
  // left: 0;
  // bottom: 0;
  width: 100%;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jia {
  width: 30px;
  height: 30px;
  background: #f43107;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  margin-right: 20px;
}
</style>
